<template>
  <div class="app-container">
    <el-row class="wrapper manage">
      <el-col :span="24" class="warp-main">
        <div class="el-bar">
          <p style="margin-bottom:10px;">
            <i class="iconfont icon-users"></i>未上架应用管理
          </p>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="queryKey0" placeholder="请输入搜索关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary"  @click="unGroundStoreAppQuery">搜索</el-button>
            </el-form-item>
          </el-form>

          <!--数据列表-->
          <el-table v-loading="loadingSoreManageDataTable" :data="unGroundStoreData" highlight-current-row height="300" style="width: 100%;">
            <el-table-column width="50" type="expand">
              <template slot-scope="scope">
                <!--扩展的数据列表.start-->
                <ImageTagTable :scope="scope" :deleteBtnDisabled="false" :afterDeleteFun="unGroundStoreAppQuery"></ImageTagTable>
                <!--扩展的数据列表.end-->
              </template>
            </el-table-column>
            <el-table-column width="400" header-align="left" prop="name" label="名称" sortable></el-table-column>
            <!-- <el-table-column width="350" header-align="left" prop="imageUrl" label="地址" sortable></el-table-column> -->
            <el-table-column width="100" header-align="left" prop="pull_count" label="下载次数" sortable></el-table-column>
            <el-table-column></el-table-column>
            <el-table-column header-align="left" prop="source" label="操作">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" type="text" size="small" @click="unGroundAppDelete(scope.$index, scope.row)">删除</el-button>
                <el-button class="iconfont icon-dingceng" type="text" size="small" @click="showEditDialog(scope.$index, scope.row)">应用上架</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--编辑弹框界面.start-->
          <el-dialog title="应用上架" :visible.sync="editFormVisible" :close-on-click-modal="true">
            <el-form ref="editForm" label-width="120px">
              <el-form-item label="名称">
                <el-input :disabled="true" v-model="editForm.name" placeholder="名称"></el-input>
              </el-form-item>
              <el-form-item label="应用类型">
                <el-select v-model="selectedAppType0" placeholder="请选择">
                  <el-option v-for="item in appTypeData0" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" v-model="desc" :autosize="{ minRows: 10, maxRows: 15}"></el-input>
              </el-form-item>
              <div class="form-btn" style="text-align:right">
                <el-button class="iconfont icon-fanhui" @click="editFormVisible=false">取消</el-button>
                <el-button class="iconfont icon-fuxuan" @click="storeAppAdd" type="primary">确定</el-button>
              </div>
            </el-form>

          </el-dialog>
          <!--编辑弹框界面.end-->
        </div>
      </el-col>
      <el-col :span="24" class="warp-main" style="margin-top:15px;">
        <div class="el-bar">
          <p style="margin-bottom:10px;">
            <i class="iconfont icon-users"></i>上架应用管理
          </p>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-select v-model="selectedAppType" placeholder="请选择">
                <el-option v-for="item in appTypeData" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="queryKey" placeholder="请输入搜索关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="storeAppQuery" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button class="iconfont icon-diceng" type="primary" @click="appDisable" :disabled="selectGroundAppIds.length==0">应用下架</el-button>
            </el-form-item>
          </el-form>
          <!--数据列表-->
          <el-table v-loading="loadingSoreDataTable" :data="storeData" highlight-current-row height="300" style="width: 100%;" @selection-change="groundAppChange">
            <el-table-column width="60" type="selection"></el-table-column>
            <el-table-column width="400" prop="name" label="名称" sortable></el-table-column>
            <!-- <el-table-column width="350" prop="imageUrl" label="地址" sortable></el-table-column> -->
            <el-table-column width="150" prop="type" label="类型" sortable></el-table-column>
            <el-table-column width="100" prop="pull_count" label="下载次数" sortable></el-table-column>
            <el-table-column></el-table-column>
            <el-table-column width="100" prop="source" label="操作">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" type="text" @click="openSetImageParamDailog(scope.$index, scope.row)" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!-- 设置镜像参数对话框.start -->
    <el-dialog title="设置镜像参数" :modal="true" width="90%"  :visible.sync="setImageParamDialogVisible" :close-on-click-modal="false" class="canshu" style="margin:20px 0">
        <image-base :pageAction="pageAction" :targetImageName="targetImageName" ></image-base>
    </el-dialog>
    <!-- 设置镜像参数对话框.end -->
  </div>
</template>
<script>
import ImageTagTable from '@/components/appCenter/appstoreAdmin/ImageTagTable';
import imageBase from "@/components/appCenter/appManage/imageBase";
import { appManagement } from '@/utils/appManagement'; // 应用管理工具类
export default {
  components: { ImageTagTable,imageBase },
  data() {
    return {
      queryKey0: '',
      queryKey: '',
      unGroundStoreData: [],
      editForm: {},
      desc: "",
      editFormVisible: false,
      storeData: [],
      appTypeData0: [],
      selectedAppType0: '',
      appTypeData: [{
        value: '',
        label: '---全部应用类型---'
      }],
      selectedAppType: '',
      selectGroundAppIds: [],
      //////////////设置镜像参数////////////////////
      // 是否显示设置镜像参数的对话框
      setImageParamDialogVisible: false,
      // 设置参数动作
      pageAction: this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE,
      // 镜像名称
      targetImageName: '',
      // 商店管理查询遮罩
      loadingSoreManageDataTable: false,
      // 商店查询遮罩
      loadingSoreDataTable: false,
    };
  },
  created: function() {
    this.unGroundStoreAppQuery();
    this.appTypeQuery();
    this.storeAppQuery();//初始化
  },
  methods: {
    //未上架商店应用查询
    unGroundStoreAppQuery() {
      let url = this.projectConfig.URL_API_APP_STORE_APP_UN_GROUND + '?queryKey=' + this.queryKey0;
      // 遮罩开启
      this.loadingSoreManageDataTable = true;
      this.httpClient.httpClientget(url).then((response) => {
          // 遮罩结束
          this.loadingSoreManageDataTable = false;
        // 返回处理
        this.unGroundStoreData = response.data;
      }).catch(error => {
          // 遮罩结束
          this.loadingSoreManageDataTable = false;
      });
    },
    // 打开修改配置文件的对话框
    showEditDialog: function(index, row) {
      this.editFormVisible = true;
      // 赋值给修改对话框
      this.editForm = row;
      this.desc = '';
      this.appTypeQuery0();
    },
    //商店应用上架
    storeAppAdd() {
      let url = this.projectConfig.URL_API_APP_STORE_APP;
      let parm = {
        name: this.editForm.name,
        appType: this.selectedAppType0,
        desc: this.desc
      }
      // 操作审计
      this.userBaseInfo.setOperObjectName(this.editForm.name);
      this.httpClient.httpClientPost(url, parm).then((response) => {
        // 返回处理 success
        this.editFormVisible = false;
        this.unGroundStoreAppQuery();
        this.storeAppQuery();
      });
    },

    //未上架应用删除
    unGroundAppDelete: function(index, row) {
      this.$confirm('此操作有风险, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        let parm = {
          name: row.name
        }
        let url = this.projectConfig.URL_API_APP_STORE_APP_UN_GROUND;
        // 操作审计
         this.userBaseInfo.setOperObjectName(row.name);
        this.httpClient.httpClientDelete(url, parm).then((response) => {
          // 返回处理 success
          this.unGroundStoreAppQuery();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    //商店应用查询
    storeAppQuery() {
      let url = this.projectConfig.URL_API_APP_STORE_APP_GROUND + '?queryKey=' + this.queryKey + '&appType=' + this.selectedAppType;
      // 开启遮罩
      this.loadingSoreDataTable = true;
      this.httpClient.httpClientget(url).then((response) => {
          // 遮罩结束
          this.loadingSoreDataTable = false;
        // 返回处理
        this.storeData = response.data;
      }).catch(error => {
          // 遮罩结束
          this.loadingSoreDataTable = false;
      });
    },
    //应用类型查询
    appTypeQuery0() {
      this.appTypeData0 = [];
      let url = this.projectConfig.URL_API_APP_STORE_APP_TYPE;
      this.httpClient.httpClientget(url).then((response) => {
        // 返回处理
        let data = response.data;
        if (data.length > 0) {
          data.forEach((value) => {
            let item = {
              value: value.id,
              label: value.name
            };
            this.appTypeData0.push(item);
          });
        }
      });
    },
    //应用类型查询
    appTypeQuery() {
      let url = this.projectConfig.URL_API_APP_STORE_APP_TYPE;
      this.httpClient.httpClientget(url).then((response) => {
        // 返回处理
        let data = response.data;
        if (data.length > 0) {
          data.forEach((value) => {
            let item = {
              value: value.id,
              label: value.name
            };
            this.appTypeData.push(item);
          });
        }
      });
    },

    groundAppChange: function(sels) {
      this.selectGroundAppIds = sels;
    },

    //应用下架处理
    appDisable() {
      this.$confirm('此操作有风险, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        let ids = [];
        if (this.selectGroundAppIds.length > 0) {
          this.selectGroundAppIds.forEach((value) => {
            ids.push(value.id);
          });
        }
        let parm = {
          ids: ids
        }
        let url = this.projectConfig.URL_API_APP_STORE_APP;
        // 操作审计
        this.userBaseInfo.setOperObjectName('下架应用');
        this.httpClient.httpClientDelete(url, parm).then((response) => {
          this.unGroundStoreAppQuery();
          this.storeAppQuery();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    ///////////////////////////设置镜像参数///////////////////////
    // 打开设置镜像参数的对话框
    openSetImageParamDailog: function(index,row) {
        // 设置镜像名称
        this.targetImageName = row.name;
        // 设置动作
        appManagement.setPageAction(this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE);
        // 打开设置镜像参数的对话框
        this.setImageParamDialogVisible = true;
        
    },
  }
}
</script>
<style>
.manage .selected {
  width: 120px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.manage .el-table__expanded-cell {
  padding: 0;
}

.manage .extend .el-table {
  padding-left: 20px;
}

.manage .extend {
  border: none;
}
</style>